<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>  
<fmt:setLocale value="pt-BR" />  

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<jsp:include page="/WEB-INF/jsp/head.jsp"/>
	
	<script src="http://code.highcharts.com/highcharts.js"></script>
	<script src="http://code.highcharts.com/modules/exporting.js"></script>
	
	<script>
	$(function () {
        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: ''
            },
            tooltip: {
        	    pointFormat: '{series.name}: <b>{point.percentage}%</b>',
            	percentageDecimals: 1
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Browser share',
                data: [${intervalos}]
            }]
        });
    });	
	</script>
</head>
<body>

	<table width="70%" align="center" cellspacing="10" style="border-style:solid;border-width:2px;border-bottom-color: black;">
		<tr>
			<td colspan="2" align="center"><b>RELATÓRIO DE FRAUDES POR FAIXA DE VALORES</b></td>
		</tr>
		<tr>
			<td colspan="2" align="center"><b>SISTEMA SCAF</b></td>
		</tr>
		<tr>
			<td colspan="2" align="center">&nbsp;</td>
		</tr>
		<tr>
			<td align="left">Período da Fraude: ${datainicial} a ${dataFinal}</td>
			<td align="right">Usuário: ${usuario}</td>
		</tr>
		<tr>
			<td align="left">Período da Transação: ${dataInicialTransacao} a ${dataFinalTransacao}</td>
			<td align="right">Tipo de Transação: ${tipoTransacao}</td>
		</tr>
		<tr>
			<td align="left">País: ${pais}</td>
			<td align="right">Data Emissão: ${dataAtual}</td>
		</tr>
		<tr>
			<td align="left">Estado: ${estado}</td>
			<td align="right">Bandeira do Cartão: ${bandeira}</td>
		</tr>
		<tr>
			<td align="left">Cidade: ${cidade}</td>
			<td align="right">Tipo de Fraude: ${tipo}</td>
		</tr>
		<tr>
			<td colspan="2" align="center">
				<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
			</td>
		</tr>			
			
	</table>

	<br/>
	
	<input type="button" value="Voltar" onClick="history.go(-1)">		 	
</body>
</html>